<template>
	<div>


		
		<!-- <van-cell title="库房" is-link @click="showPopup" :value="unit" /> -->
		<van-cell title="计量单位" is-link @click="showPopup" :value="unit"/>
		
		<van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
			<van-picker title="计量单位" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"
				@change="onChange" :default-index="0"/>
		</van-popup>
		
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'

	import {
		select_all_unit_url

	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				unit: '请选择计量单位',
				unit_id: '', 
				show: false,
				unit_list: [],
				columns: [],
			}
		},
		methods: {
			send_to_parent(){
				this.$emit('listenToChangeUnitIDEvent',{'unit_id': this.unit_id})
				
			},
			showPopup() {
				this.show = true;
			},
			
			onConfirm(value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				this.unit = value
				this.unit_id = this.unit_list[index]['id']
				this.show=false
				this.send_to_parent()

			},
			onChange(picker, value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
				this.unit = value
				this.unit_id = this.unit_list[index]['id']
				// console.log(this.unit_id)
				this.send_to_parent()
			},
			onCancel() {
				// Toast('取消');
				this.show=false
			},

			get_all_unit() {

				this.$axios({
					method: 'GET',
					url: select_all_unit_url,
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					this.unit_list = response.data.resultBody.reverse()
					for(let i=0; i < this.unit_list.length; i++){
						this.columns.push(this.unit_list[i]['unit_name'])
					}
					// this.unit_id = this.unit_list[0]['id']
					// this.send_to_parent()
					
					
					// console.log(this.columns)
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			}

		},
		computed: {},
		watch: {},
		created() {},
		mounted() {

			this.get_all_unit()


		},
	}
</script>

<style scoped lang="less">
	.cell_header_title {
		background-color: #F0F0F0;
		font-weight: 800;
	}
</style>
